<template>
	<view class="address-warp page-bg content-30">
		<view class="form-wrap br">
			<view class="form-group">
				<view class="form-group__title">真实姓名</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="realName" name='realName' type="text" placeholder="请输入真实姓名" placeholder-class="placeholder" />
				</view>
			</view>
			
			<view class="form-group">
				<view class="form-group__title">身份证号码</view>
				<view class="form-group__con">
						<input class="form-group__from" v-model="idCardNo" name='idCardNo' type="text" placeholder="请输入身份证号码" placeholder-class="placeholder" />
				</view>
			</view>
				
			<view class="form-group">
				<view class="form-group__title">手机号</view>
				<view class="form-group__con">
					<text class="phone">{{phoneNumber | phonePartOf}}</text>
				</view>
			</view>
			
			<smsCode :phoneNumber="phoneNumber" @getCode='getCode'></smsCode>
		</view>
		<view class="form-wrap br">
			
			<view class="form-group form-group__upload">
				<view class="form-group__title">请上传身份证(保证字迹清晰)</view>
				<view class="form-group__con">
					<view class="upload-item">
						<image class="upload-img" @click="uploadImg('idCardPositive')" v-if="idCardPositive" :src="idCardPositive"></image>
						<image class="upload-img" @click="uploadImg('idCardPositive')" v-else src="../../static/common/icon_04.png"></image>
						<view class="upload-tip">身份证正面</view>
					</view>
					<view class="upload-item">
						<image class="upload-img" @click="uploadImg('idCardSide')" v-if="idCardSide" :src="idCardSide"></image>
						<image class="upload-img" @click="uploadImg('idCardSide')" v-else src="../../static/common/icon_04.png"></image>
						<view class="upload-tip">身份证反面</view>
					</view>
					<view class="upload-item">
						<image class="upload-img" @click="uploadImg('iDcardHold')" v-if="iDcardHold" :src="iDcardHold"></image>
						<image class="upload-img" @click="uploadImg('iDcardHold')" v-else src="../../static/common/icon_04.png"></image>
						<view class="upload-tip">手持身份证</view>
					</view>
				</view>
			</view>
		</view>
		<view class="circular-submit" @click="formSubmit">立即实名</view>
	</view>
</template>

<script>
	import smsCode from '../../components/smsCode.vue'
	import { api } from '../../utils/api.js'
	import  common  from '../../utils/common.js'
	
	export default{
		data() {
			return{
				phoneNumber: '',
				smsCode: '', // 短信验证码
				idCardNo: '', // 身份证号码
				realName: '', // 真实姓名
				idCardPositive: '', // 身份证正面	
				idCardSide: '', // 身份证反面	
				iDcardHold: '', // 手持身份证	
				id: ''
			}
		},
		onLoad() {
			let userInfo = common.getUserInfo()
			this.phoneNumber = userInfo.userPhone.toString()
		},
		
		methods:{
			uploadImg(field) {
				common.imgUpload(res => {
					console.log(res)
					this.$data[field] = res
				})
			},
			
			formSubmit() {
				let { realName,idCardNo,smsCode,idCardPositive,idCardSide, iDcardHold } = this.$data
				console.log(idCardPositive) // IDCardReg
				if(!realName) { this.$showToast('请填写真实姓名~'); return }
				if(!idCardNo) { this.$showToast('请填写身份证号码~'); return }
				if(!common.isIDCard(idCardNo)) { this.$showToast('请填写正确的身份证号码~'); return }
				if(!smsCode) { this.$showToast('请填写验证码~'); return }
				if(!idCardPositive) { this.$showToast('请上传身份证正面~'); return }
				if(!idCardSide) { this.$showToast('请上传身份证反面~'); return }
				if(!iDcardHold) { this.$showToast('请上传手持身份证~'); return }
				api.realNameAuth({ realName,idCardNo,smsCode,idCardPositive,idCardSide, iDcardHold }, () => {
					this.$showToast('申请成功, 等待审核~')
					setTimeout(() => {
						this.$link('/pages/mine/mine')
					}, 2000)
				})
			},
			
			getCode(smsCode) {
				console.log(smsCode)
				this.smsCode = smsCode
			}
		},
		components:{
			smsCode
		}
	}
</script>

<style scoped lang="less">	
@import url('../../app.less');
	.circular-submit{
		margin-top: 50rpx;
	}
	.form-wrap{
		margin-bottom: 20rpx;
		.phone{
			color: @font-base-color;
			.f26;
			.flex-base;
			height: 100%;
		}
	}
</style>
